<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考勤系统 - 排班管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C',
                        light: '#F2F3F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .shadow-card {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- 左侧Logo和标题 -->
                <div class="flex items-center space-x-2">
                    <div class="text-primary text-2xl">
                        <i class="fa fa-calendar-check-o"></i>
                    </div>
                    <span class="font-bold text-xl">智慧考勤系统</span>
                </div>
                
                <!-- 中部导航菜单 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="#" class="text-gray-500 hover:text-primary px-1 py-2 border-b-2 border-transparent">首页</a>
                    <a href="#" class="text-primary px-1 py-2 border-b-2 border-primary font-medium">排班管理</a>
                    <a href="#" class="text-gray-500 hover:text-primary px-1 py-2 border-b-2 border-transparent">考勤记录</a>
                    <a href="#" class="text-gray-500 hover:text-primary px-1 py-2 border-b-2 border-transparent">统计报表</a>
                    <a href="#" class="text-gray-500 hover:text-primary px-1 py-2 border-b-2 border-transparent">系统设置</a>
                </nav>
                
                <!-- 右侧用户信息 -->
                <div class="flex items-center space-x-4">
                    <button class="p-2 rounded-full hover:bg-gray-100 text-gray-500 relative">
                        <i class="fa fa-bell-o"></i>
                        <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
                    </button>
                    <div class="flex items-center space-x-2">
                        <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary/20">
                        <span class="hidden md:inline-block font-medium">管理员</span>
                        <i class="fa fa-angle-down text-gray-500"></i>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6">
        <!-- 页面标题和操作区 -->
        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
            <div>
                <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">排班管理</h1>
                <p class="text-gray-500 mt-1">管理员工排班计划，设置班次规则</p>
            </div>
            <div class="mt-4 md:mt-0 flex space-x-3">
                <button class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 transition-custom flex items-center">
                    <i class="fa fa-download mr-2"></i>导出
                </button>
                <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-custom flex items-center">
                    <i class="fa fa-plus mr-2"></i>新建排班
                </button>
            </div>
        </div>
        
        <!-- 筛选和搜索区 -->
        <div class="bg-white rounded-xl p-4 shadow-card mb-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="relative">
                    <label class="block text-sm font-medium text-gray-700 mb-1">部门</label>
                    <div class="relative">
                        <select class="w-full pl-3 pr-10 py-2 text-base border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 appearance-none">
                            <option value="">全部部门</option>
                            <option value="1">技术部</option>
                            <option value="2">市场部</option>
                            <option value="3">人力资源部</option>
                            <option value="4">财务部</option>
                            <option value="5">销售部</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
                            <i class="fa fa-chevron-down text-xs"></i>
                        </div>
                    </div>
                </div>
                
                <div class="relative">
                    <label class="block text-sm font-medium text-gray-700 mb-1">日期范围</label>
                    <div class="flex space-x-2">
                        <input type="date" class="w-full px-3 py-2 text-base border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                        <span class="flex items-center text-gray-500">至</span>
                        <input type="date" class="w-full px-3 py-2 text-base border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                    </div>
                </div>
                
                <div class="relative">
                    <label class="block text-sm font-medium text-gray-700 mb-1">搜索</label>
                    <div class="relative">
                        <input type="text" placeholder="输入员工姓名或工号" class="w-full pl-10 pr-4 py-2 text-base border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-search text-gray-400"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-4 flex flex-wrap gap-2">
                <button class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-full hover:bg-primary/20 transition-custom">
                    早班
                </button>
                <button class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-full hover:bg-primary/20 transition-custom">
                    中班
                </button>
                <button class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-full hover:bg-primary/20 transition-custom">
                    晚班
                </button>
                <button class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-full hover:bg-primary/20 transition-custom">
                    周末班
                </button>
                <button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200 transition-custom">
                    清除筛选
                </button>
            </div>
        </div>
        
        <!-- 数据展示区 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 排班日历 -->
            <div class="lg:col-span-2 bg-white rounded-xl shadow-card p-5">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold">排班日历</h2>
                    <div class="flex space-x-2">
                        <button class="p-2 rounded-full hover:bg-gray-100 text-gray-600">
                            <i class="fa fa-chevron-left"></i>
                        </button>
                        <button class="px-3 py-1 text-sm font-medium bg-primary/10 text-primary rounded-lg">
                            2025年6月
                        </button>
                        <button class="p-2 rounded-full hover:bg-gray-100 text-gray-600">
                            <i class="fa fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 日历头部 -->
                <div class="grid grid-cols-7 mb-2">
                    <div class="text-center text-sm font-medium text-gray-500 py-2">周日</div>
                    <div class="text-center text-sm font-medium text-gray-500 py-2">周一</div>
                    <div class="text-center text-sm font-medium text-gray-500 py-2">周二</div>
                    <div class="text-center text-sm font-medium text-gray-500 py-2">周三</div>
                    <div class="text-center text-sm font-medium text-gray-500 py-2">周四</div>
                    <div class="text-center text-sm font-medium text-gray-500 py-2">周五</div>
                    <div class="text-center text-sm font-medium text-gray-500 py-2">周六</div>
                </div>
                
                <!-- 日历主体 -->
                <div class="grid grid-cols-7 gap-1">
                    <!-- 上个月日期 -->
                    <div class="aspect-square rounded-lg p-1 text-gray-400 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">28</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 text-gray-400 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">29</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 text-gray-400 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">30</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 text-gray-400 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">31</div>
                    </div>
                    
                    <!-- 当月日期 -->
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">1</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">2</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">3</div>
                    </div>
                    
                    <!-- 第二行 -->
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">4</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">5</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">6</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">7</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">8</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">9</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">10</div>
                    </div>
                    
                    <!-- 第三行 -->
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">11</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">12</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">13</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">14</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">15</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">16</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">17</div>
                    </div>
                    
                    <!-- 第四行 -->
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">18</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">19</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 bg-primary/10 hover:bg-primary/20 transition-custom cursor-pointer">
                        <div class="text-xs p-1 font-medium">20</div>
                        <div class="text-[10px] mt-1 px-1 py-0.5 bg-primary/20 text-primary rounded-full inline-block">早班</div>
                        <div class="text-[10px] mt-0.5 px-1 py-0.5 bg-success/20 text-success rounded-full inline-block">已确认</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">21</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">22</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">23</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">24</div>
                    </div>
                    
                    <!-- 第五行 -->
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">25</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">26</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">27</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">28</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">29</div>
                    </div>
                    <div class="aspect-square rounded-lg p-1 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">30</div>
                    </div>
                    
                    <!-- 下个月日期 -->
                    <div class="aspect-square rounded-lg p-1 text-gray-400 hover:bg-gray-50 transition-custom">
                        <div class="text-xs p-1">1</div>
                    </div>
                </div>
                
                <div class="mt-4 flex items-center justify-center">
                    <button class="text-primary hover:text-primary/80 text-sm font-medium transition-custom">
                        查看更多 <i class="fa fa-angle-down ml-1"></i>
                    </button>
                </div>
            </div>
            
            <!-- 排班统计 -->
            <div class="bg-white rounded-xl shadow-card p-5">
                <h2 class="text-lg font-semibold mb-4">排班统计</h2>
                
                <!-- 图表 -->
                <div class="mb-6 h-64">
                    <canvas id="scheduleChart"></canvas>
                </div>
                
                <!-- 统计数据 -->
                <div class="space-y-4">
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-primary mr-2"></div>
                            <span class="text-sm">早班</span>
                        </div>
                        <span class="font-semibold">28 人</span>
                    </div>
                    
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-success mr-2"></div>
                            <span class="text-sm">中班</span>
                        </div>
                        <span class="font-semibold">15 人</span>
                    </div>
                    
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-warning mr-2"></div>
                            <span class="text-sm">晚班</span>
                        </div>
                        <span class="font-semibold">12 人</span>
                    </div>
                    
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-danger mr-2"></div>
                            <span class="text-sm">周末班</span>
                        </div>
                        <span class="font-semibold">8 人</span>
                    </div>
                    
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-info mr-2"></div>
                            <span class="text-sm">休假</span>
                        </div>
                        <span class="font-semibold">5 人</span>
                    </div>
                </div>
                
                <!-- 最近更新 -->
                <div class="mt-6">
                    <h3 class="text-base font-medium mb-3">最近更新</h3>
                    <div class="space-y-3">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mr-3">
                                <img src="https://picsum.photos/id/237/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                            </div>
                            <div>
                                <div class="text-sm font-medium">黎想</div>
                                <div class="text-xs text-gray-500">更新了技术部下周排班</div>
                                <div class="text-xs text-gray-400 mt-1">10分钟前</div>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mr-3">
                                <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                            </div>
                            <div>
                                <div class="text-sm font-medium">李主管</div>
                                <div class="text-xs text-gray-500">调整了王小明的排班</div>
                                <div class="text-xs text-gray-400 mt-1">1小时前</div>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mr-3">
                                <img src="https://picsum.photos/id/91/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                            </div>
                            <div>
                                <div class="text-sm font-medium">赵主管</div>
                                <div class="text-xs text-gray-500">添加了新班次"节假日班"</div>
                                <div class="text-xs text-gray-400 mt-1">昨天</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 排班列表 -->
        <div class="mt-6 bg-white rounded-xl shadow-card overflow-hidden">
            <div class="flex items-center justify-between p-5 border-b border-gray-100">
                <h2 class="text-lg font-semibold">排班列表</h2>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-custom">
                        <i class="fa fa-th-large mr-1"></i> 网格视图
                    </button>
                    <button class="px-3 py-1 text-sm bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom">
                        <i class="fa fa-list mr-1"></i> 列表视图
                    </button>
                </div>
            </div>
            
            <!-- 列表头部 -->
            <div class="hidden md:grid grid-cols-12 bg-gray-50 py-3 px-5 text-sm font-medium text-gray-600">
                <div class="col-span-2">员工信息</div>
                <div class="col-span-2">部门</div>
                <div class="col-span-2">日期</div>
                <div class="col-span-2">班次</div>
                <div class="col-span-2">状态</div>
                <div class="col-span-2 text-right">操作</div>
            </div>
            
            <!-- 列表项 -->
            <div class="divide-y divide-gray-100">
                <!-- 列表项1 -->
                <div class="p-4 md:grid md:grid-cols-12 md:items-center hover:bg-gray-50 transition-custom">
                    <div class="md:col-span-2 flex items-center">
                        <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-10 h-10 rounded-full object-cover mr-3">
                        <div>
                            <div class="font-medium">王小明</div>
                            <div class="text-xs text-gray-500">EMP001</div>
                        </div>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="text-sm">技术部</span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="text-sm">2025-06-20</span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary">
                            早班 (08:00-16:00)
                        </span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success">
                            <i class="fa fa-check-circle mr-1"></i> 已确认
                        </span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0 text-right">
                        <div class="flex justify-end space-x-2">
                            <button class="p-1.5 text-gray-500 hover:text-primary rounded-full hover:bg-primary/10 transition-custom" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-danger rounded-full hover:bg-danger/10 transition-custom" title="删除">
                                <i class="fa fa-trash-o"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-info rounded-full hover:bg-info/10 transition-custom" title="详情">
                                <i class="fa fa-ellipsis-v"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 列表项2 -->
                <div class="p-4 md:grid md:grid-cols-12 md:items-center hover:bg-gray-50 transition-custom">
                    <div class="md:col-span-2 flex items-center">
                        <img src="https://picsum.photos/id/91/200/200" alt="用户头像" class="w-10 h-10 rounded-full object-cover mr-3">
                        <div>
                            <div class="font-medium">李小红</div>
                            <div class="text-xs text-gray-500">EMP002</div>
                        </div>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="text-sm">市场部</span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="text-sm">2025-06-20</span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-warning/10 text-warning">
                            中班 (16:00-24:00)
                        </span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-warning/10 text-warning">
                            <i class="fa fa-clock-o mr-1"></i> 待确认
                        </span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0 text-right">
                        <div class="flex justify-end space-x-2">
                            <button class="p-1.5 text-gray-500 hover:text-primary rounded-full hover:bg-primary/10 transition-custom" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-danger rounded-full hover:bg-danger/10 transition-custom" title="删除">
                                <i class="fa fa-trash-o"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-info rounded-full hover:bg-info/10 transition-custom" title="详情">
                                <i class="fa fa-ellipsis-v"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 列表项3 -->
                <div class="p-4 md:grid md:grid-cols-12 md:items-center hover:bg-gray-50 transition-custom">
                    <div class="md:col-span-2 flex items-center">
                        <img src="https://picsum.photos/id/237/200/200" alt="用户头像" class="w-10 h-10 rounded-full object-cover mr-3">
                        <div>
                            <div class="font-medium">张大山</div>
                            <div class="text-xs text-gray-500">EMP003</div>
                        </div>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="text-sm">人力资源部</span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="text-sm">2025-06-20</span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-danger/10 text-danger">
                            晚班 (24:00-08:00)
                        </span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success">
                            <i class="fa fa-check-circle mr-1"></i> 已确认
                        </span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0 text-right">
                        <div class="flex justify-end space-x-2">
                            <button class="p-1.5 text-gray-500 hover:text-primary rounded-full hover:bg-primary/10 transition-custom" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-danger rounded-full hover:bg-danger/10 transition-custom" title="删除">
                                <i class="fa fa-trash-o"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-info rounded-full hover:bg-info/10 transition-custom" title="详情">
                                <i class="fa fa-ellipsis-v"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 列表项4 -->
                <div class="p-4 md:grid md:grid-cols-12 md:items-center hover:bg-gray-50 transition-custom">
                    <div class="md:col-span-2 flex items-center">
                        <img src="https://picsum.photos/id/65/200/200" alt="用户头像" class="w-10 h-10 rounded-full object-cover mr-3">
                        <div>
                            <div class="font-medium">赵小美</div>
                            <div class="text-xs text-gray-500">EMP004</div>
                        </div>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="text-sm">财务部</span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="text-sm">2025-06-20</span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-info/10 text-info">
                            休假
                        </span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success">
                            <i class="fa fa-check-circle mr-1"></i> 已批准
                        </span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0 text-right">
                        <div class="flex justify-end space-x-2">
                            <button class="p-1.5 text-gray-500 hover:text-primary rounded-full hover:bg-primary/10 transition-custom" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-danger rounded-full hover:bg-danger/10 transition-custom" title="删除">
                                <i class="fa fa-trash-o"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-info rounded-full hover:bg-info/10 transition-custom" title="详情">
                                <i class="fa fa-ellipsis-v"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 列表项5 -->
                <div class="p-4 md:grid md:grid-cols-12 md:items-center hover:bg-gray-50 transition-custom">
                    <div class="md:col-span-2 flex items-center">
                        <img src="https://picsum.photos/id/92/200/200" alt="用户头像" class="w-10 h-10 rounded-full object-cover mr-3">
                        <div>
                            <div class="font-medium">周大勇</div>
                            <div class="text-xs text-gray-500">EMP005</div>
                        </div>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="text-sm">销售部</span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="text-sm">2025-06-20</span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary">
                            早班 (08:00-16:00)
                        </span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-danger/10 text-danger">
                            <i class="fa fa-exclamation-circle mr-1"></i> 待处理
                        </span>
                    </div>
                    
                    <div class="md:col-span-2 mt-2 md:mt-0 text-right">
                        <div class="flex justify-end space-x-2">
                            <button class="p-1.5 text-gray-500 hover:text-primary rounded-full hover:bg-primary/10 transition-custom" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-danger rounded-full hover:bg-danger/10 transition-custom" title="删除">
                                <i class="fa fa-trash-o"></i>
                            </button>
                            <button class="p-1.5 text-gray-500 hover:text-info rounded-full hover:bg-info/10 transition-custom" title="详情">
                                <i class="fa fa-ellipsis-v"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 分页 -->
            <div class="px-5 py-3 flex items-center justify-between border-t border-gray-100">
                <div class="text-sm text-gray-500">
                    显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">28</span> 条记录
                </div>
                <div class="flex space-x-1">
                    <button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                        <i class="fa fa-angle-left"></i>
                    </button>
                    <button class="px-3 py-1 rounded border border-primary bg-primary text-white">1</button>
                    <button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">2</button>
                    <button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">3</button>
                    <button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">4</button>
                    <button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">5</button>
                    <button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50">
                        <i class="fa fa-angle-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 mt-10">
        <div class="container mx-auto px-4 py-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="text-center md:text-left mb-4 md:mb-0">
                    <p class="text-sm text-gray-500">© 2025 智慧考勤系统. 保留所有权利.</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-primary transition-custom">
                        <i class="fa fa-question-circle"></i> 帮助中心
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-custom">
                        <i class="fa fa-file-text-o"></i> 使用条款
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-custom">
                        <i class="fa fa-shield"></i> 隐私政策
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 新建排班模态框 -->
    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="newScheduleModal">
        <div class="bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
            <div class="p-5 border-b border-gray-100 flex items-center justify-between">
                <h3 class="text-lg font-semibold">新建排班</h3>
                <button class="text-gray-400 hover:text-gray-600" onclick="document.getElementById('newScheduleModal').classList.add('hidden')">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <div class="p-5">
                <form>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">员工</label>
                        <div class="relative">
                            <select class="w-full pl-3 pr-10 py-2 text-base border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 appearance-none">
                                <option value="">选择员工</option>
                                <option value="1">王小明 (技术部)</option>
                                <option value="2">李小红 (市场部)</option>
                                <option value="3">张大山 (人力资源部)</option>
                                <option value="4">赵小美 (财务部)</option>
                                <option value="5">周大勇 (销售部)</option>
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
                                <i class="fa fa-chevron-down text-xs"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">日期</label>
                        <input type="date" class="w-full px-3 py-2 text-base border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">班次</label>
                        <div class="grid grid-cols-2 gap-3">
                            <div class="relative">
                                <input type="radio" id="shift1" name="shift" class="hidden peer">
                                <label for="shift1" class="flex items-center justify-between p-3 border border-gray-300 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 transition-custom">
                                    <div>
                                        <div class="font-medium">早班</div>
                                        <div class="text-xs text-gray-500">08:00 - 16:00</div>
                                    </div>
                                    <div class="w-5 h-5 rounded-full border border-gray-300 peer-checked:border-primary peer-checked:bg-primary flex items-center justify-center">
                                        <div class="w-2 h-2 rounded-full bg-white scale-0 peer-checked:scale-100 transition-transform"></div>
                                    </div>
                                </label>
                            </div>
                            
                            <div class="relative">
                                <input type="radio" id="shift2" name="shift" class="hidden peer">
                                <label for="shift2" class="flex items-center justify-between p-3 border border-gray-300 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 transition-custom">
                                    <div>
                                        <div class="font-medium">中班</div>
                                        <div class="text-xs text-gray-500">16:00 - 24:00</div>
                                    </div>
                                    <div class="w-5 h-5 rounded-full border border-gray-300 peer-checked:border-primary peer-checked:bg-primary flex items-center justify-center">
                                        <div class="w-2 h-2 rounded-full bg-white scale-0 peer-checked:scale-100 transition-transform"></div>
                                    </div>
                                </label>
                            </div>
                            
                            <div class="relative">
                                <input type="radio" id="shift3" name="shift" class="hidden peer">
                                <label for="shift3" class="flex items-center justify-between p-3 border border-gray-300 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 transition-custom">
                                    <div>
                                        <div class="font-medium">晚班</div>
                                        <div class="text-xs text-gray-500">24:00 - 08:00</div>
                                    </div>
                                    <div class="w-5 h-5 rounded-full border border-gray-300 peer-checked:border-primary peer-checked:bg-primary flex items-center justify-center">
                                        <div class="w-2 h-2 rounded-full bg-white scale-0 peer-checked:scale-100 transition-transform"></div>
                                    </div>
                                </label>
                            </div>
                            
                            <div class="relative">
                                <input type="radio" id="shift4" name="shift" class="hidden peer">
                                <label for="shift4" class="flex items-center justify-between p-3 border border-gray-300 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 transition-custom">
                                    <div>
                                        <div class="font-medium">休假</div>
                                        <div class="text-xs text-gray-500">全天休息</div>
                                    </div>
                                    <div class="w-5 h-5 rounded-full border border-gray-300 peer-checked:border-primary peer-checked:bg-primary flex items-center justify-center">
                                        <div class="w-2 h-2 rounded-full bg-white scale-0 peer-checked:scale-100 transition-transform"></div>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">备注 (选填)</label>
                        <textarea rows="3" class="w-full px-3 py-2 text-base border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="添加备注信息"></textarea>
                    </div>
                </form>
            </div>
            
            <div class="p-5 border-t border-gray-100 flex justify-end space-x-3">
                <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-custom" onclick="document.getElementById('newScheduleModal').classList.add('hidden')">
                    取消
                </button>
                <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom">
                    保存
                </button>
            </div>
        </div>
    </div>

    <script>
        // 排班统计图表
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('scheduleChart').getContext('2d');
            
            const chart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['早班', '中班', '晚班', '周末班', '休假'],
                    datasets: [{
                        data: [28, 15, 12, 8, 5],
                        backgroundColor: [
                            '#165DFF',
                            '#00B42A',
                            '#FF7D00',
                            '#F53F3F',
                            '#86909C'
                        ],
                        borderWidth: 0,
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    const total = context.dataset.data.reduce((acc, val) => acc + val, 0);
                                    const percentage = Math.round((value / total) * 100);
                                    return `${label}: ${value}人 (${percentage}%)`;
                                }
                            }
                        }
                    },
                    cutout: '70%'
                }
            });
            
            // 打开新建排班模态框
            document.querySelector('.bg-primary.text-white.px-4.py-2.rounded-lg').addEventListener('click', function() {
                document.getElementById('newScheduleModal').classList.remove('hidden');
            });
        });
    </script>
</body>
</html>
    